<template>
  <div class="align-c">
    <div class="rich-text">
      <div class="abs-right pad-10 mar-r-10" @click="editPreview">
        <button class="mini-btn" size="mini">{{ isPreview ? '编辑' : '预览' }}</button>
      </div>
      <div v-for="(item, index) in getContent" :key="index">
        <div class="bg-color-white" :class=" isPreview ? '' : 'border-all-w pad-10' " v-if="item.type==='text'">
          <div class="pad-t-6 pad-b-6" :class="item.style.sizeStyle + ' ' +
                item.style.shapeStyle + ' ' +
                item.style.alignStyle + ' ' +
                item.style.colorStyle">
            <text space="nbsp">{{ item.text }}</text>
          </div>
          <div class="align-c" v-if="!isPreview">
            <div class="flex mar-t-10">
              <button size="mini" class="mini-btn mar-r-20" @click="setText(index, 1)">修改</button>
              <button size="mini" class="mini-btn mar-l-20" @click="deleteContent(index)">删除</button>
            </div>
          </div>
        </div>
        <div class="bg-color-white" :class=" isPreview ? '' : 'border-all-w pad-10' " v-if="item.type==='image'">
          <div class="align-c" :class="item.style.isMargin ? 'pad-t-6 pad-b-6' : ''">
            <div>
              <img @click="previewImage(item.src)" :style="'width:' + item.style.width + 'rpx'"
                     :src="item.src" mode="widthFix" />
            </div>
            <div v-if="item.text" class="font-13 font-gray pad-t-6 pad-b-6">{{ item.text }}</div>
          </div>
          <div class="align-c" v-if="!isPreview">
            <div class="flex mar-t-10">
              <button size="mini" class="mini-btn mar-r-20" @click="setImg(index, 1)">修改</button>
              <button size="mini" class="mini-btn mar-l-20" @click="deleteContent(index)">删除</button>
            </div>
          </div>
        </div>
        <div class="align-c mar-b-10" @click="showSelModule(index)" v-if="!isPreview">
          <div @click="goTo" class="pad-6 mar-10 jiahao">
            <icon class="iconfont icon-jiahao font-25"></icon>
          </div>
          <div class="flex border-all sel-module box-shadow" v-if="item.selModule">
            <div class="flex-item align-c" @click="setText(index, 0)">
              <icon class="iconfont icon-duoxingwenzi font-25 font-orange"></icon>
              <label>文字</label>
            </div>
            <div class="flex-item align-c" @click="setImg(index, 0)">
              <icon class="iconfont icon-i-img font-25 font-orange"></icon>
              <label>图片</label>
            </div>
          </div>
        </div>
      </div>
      <!--加这个空白到目的是让页面可以自动滚动一定到高度-->
      <div v-if="!isPreview" class="blank-div"></div>
      <text-module ref="TextModule" @saveContent="saveContent"></text-module>
      <img-module ref="ImgModule" @saveContent="saveContent"></img-module>
    </div>
  </div>
</template>

<script>
  import TextModule from './TextModule'
  import ImgModule from './ImgModule'

  export default {
    name: 'CustomRichText',
    components: { TextModule, ImgModule },
    data() {
      return {
        isComponents: true,
        isPreview: false,
        scrollTop: 0
      }
    },
    model: {
      prop: 'content',
      event: 'saveContent'
    },
    props: {
      content: {
        type: Array
      }
    },
    computed: {
      getContent() {
        // 默认一个
        if (!this.content || this.content.length === 0) {
          this.content = [{ selModule: false }]
        }
        return this.content
      },
      windowHeight() {
        return this.$pt.getSystemInfoSync().windowHeight
      }
    },
    onShow() {
      this.$pt.removeStorageSync('chooseLocation')
    },
    methods: {
      previewImage(picData) {
        this.$pt.setStorageSync('chooseLocation', true)
        this.$pt.previewImage({urls: [picData]})
      },
      // 显示/隐藏模块
      showSelModule(index) {
        this.content[index].selModule = !this.content[index].selModule
      },
      // 设置文本内容
      setText(index, actionType) {
        this.$refs.TextModule.setText(index, actionType, this.content[index])
      },
      // 设置图片内容
      setImg(index, actionType) {
        this.$refs.ImgModule.setImg(index, actionType, this.content[index])
      },
      // 保存数组
      saveContent(node, index, actionType) {
        if (actionType === 0) {
          // 添加
          this.content.splice(index + 1, 0, node)
        } else {
          // 编辑：先删除，再插入
          this.content.splice(index, 1)
          this.content.splice(index, 0, node)
        }
        // 父子组件通讯
        this.$emit('saveContent', this.content)
      },
      // 删除内容
      deleteContent(index) {
        let that = this
        this.$pt.showModal({
          content: '确定要删除此项吗？',
          success(res) {
            if (res.confirm) {
              that.content.splice(index, 1)
            }
          }
        })
      },
      editPreview() {
        this.isPreview = !this.isPreview
      },
      // 滚动到方便的操作区域
      goTo(e) {
        this.scrollTop = e.pageY - e.clientX
        // 距离底部200px点击时，屏幕自动滚动
        if (e.clientY + 200 > this.windowHeight) {
          this.$pt.pageScrollTo({
            scrollTop: this.scrollTop + 200
          })
        }
      }
    }
  }
</script>

<style scoped>
  .rich-text {
    width: 335px;
    min-height: 200px;
  }

  .sel-module {
    width: 60%;
    padding: 10px;
    border-radius: 5px;
  }

  .border-all-w {
    border: 3px dashed #d9d9d9;
    width: 310px;
    overflow-x: scroll;
  }

  .jiahao {
    border: 1px solid #d9d9d9;
    color: #d9d9d9;
    font-weight: bold;
  }

  .blank-div {
    height: 200px;
  }
</style>
